<template>
  <q-layout view="lHh Lpr lFf" class="full-width full-height text-center layoutLogin">
    <div class="aaa">
      <img src="../assets/image/loginLogo.png">
      <q-field
        icon="person"
        helper="please input userName"
        error-label="Please type a valid userName"
        count
      >
        <q-input type="text" v-model="userName"/>
      </q-field>
      <q-field
        icon="lock"
        helper="please input password"
        error-label="Please type a valid password"
        count
      >
        <q-input type="password" v-model="password"/>
      </q-field>
      <q-btn class="login" @click.native.stop="login">登陆</q-btn>
    </div>
  </q-layout>
</template>

<script>
import { required, email } from 'vuelidate/lib/validators'
import ConstUrl from '../const.json'
export default {
  data () {
    return {
      userName: '',
      password: '',
      email: '',
      loginPkg: {
        commonKey: '402',
        appKey: '1',
        data: {
          userName: '',
          password: ''
        }
      }
    }
  },
  validations: {
    email: { required, email }
  },
  methods: {
    login () {
      this.loginPkg.data.userName = this.userName
      this.loginPkg.data.password = this.password
      this.sendPassword()
    },
    async sendPassword () {
      let params = new FormData()
      params.append('gdData', JSON.stringify(this.loginPkg))
      const response = await this.$http({
        url: ConstUrl.url,
        method: 'post',
        data: params,
        headers: {
          Accept: '*/*',
          // 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
          'X-Requested-With': 'XMLHttpRequest'
        }
      })
      const data = response.data
      const serverTime = response.headers.date /** 时间字符串,下面重新赋值,不能用const */
      if (
        (data.data[0].userName !== undefined ||
          data.data[0].userName.length !== 0) &&
        (data.sessionID !== undefined || data.sessionID.length !== 0)
      ) {
        // const expiresTime = new Date(new Date(serverTime.split('GMT').join('')).getTime() + 60 * 60 * 10000).toUTCString() /** 去掉GMT，不然会加8个小时时区 */
        const expiresTime = new Date(new Date(serverTime).getTime() + 60 * 60 * 10000).toString()
        document.cookie = `userName=${data.data[0].userName};expires= ${expiresTime}`
        document.cookie = `userID=${data.data[0].userID};expires= ${expiresTime}`
        document.cookie = `sessionID=${data.sessionID};expires= ${expiresTime} ;path=/`
        // this.$q.cookies.set('userName', 'pablo', { expires: 0.1 })
      }
      this.$router.push({ path: '/' })
    }
  }
}
</script>

<style lang="stylus">
@import ('~variables');

.layoutLogin {
  position: relative;
  background-color: $deepGreen;

  .aaa {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    transform: translate(-50%, -100%);

    img {
      position: relative;
      top: -20px;
      width: 100px;
      height: 100px;
    }
  }

  .login {
    margin-top: 20px;
    width: 100px;
    background-color: $mediumSpringGreen;
  }
}
</style>
